<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
  <style type="text/css">
    .tip{
      margin: 0 auto;
      width:600px;
      height:100px;
      text-align: center;
      border:1px solid black;
    }
  </style>
</head>
<body>
<!--当气温高于30度时，展示高温作业提示-->
<div id="app">
  <h4>当前的温度为:{{temp}}℃</h4>
  <button @click="temp++">获取最新温度</button>
<!--  展示信息-->
  <br>
  <div :class="'tip'" v-show="temp>=30">
    <p>温度过高，请注意户外工作时间，做好相应的防护措施</p>
  </div>
  <br><br>
  <hr>
  <h4>当前的温度为:{{temp}}℃</h4>
  <button @click="temp++">获取最新温度</button>
  <!--  展示信息-->
  <br>
  <div :class="'tip'" v-if="temp>=30">
    <p>温度过高，请注意户外工作时间，做好相应的防护措施</p>
  </div>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        temp:28
      }
    }
  })
</script>
</body>
</html>
